<template>
	<div>
		<div class="heaPortrait">
		    <img :src="item.guanZhu.bgPicture" alt="" />
		</div>
		<div class="commentReply" >
			<div class="chitchat">
				<p>{{item.guanZhu.myName}}</p>
				<p @click.stop="changeXianShi(index)" v-if="isIndex">{{noGuanZhu}}</p>
				<p class="xianShi" @click.stop="changeXianShi(index)" v-else>{{yesGuanZhu}}</p>
				<div>
					<span>{{item.guanZhu.myContent}}</span>
				</div>
			</div>	
		</div>
	</div>
	
</template>
<script>
	export default{
		name:"guanZhuComponents",
		data(){
			return{
				navTitle:"关注",
				noGuanZhu:"加关注",
				yesGuanZhu:"已关注",
				isIndex:true,
				guanZhuData:[],
			}
		},
		methods:{
			changeXianShi(index){
				this.isIndex = !this.isIndex;
			}
		},
		props:["index","item"]
	}
</script>

<style scoped lang="less">
@current:100rem;
	.heaPortrait {
		float: left;
		position: relative;
		margin-left: 20/@current;
		img {
			width: 80/@current;
			height: 80/@current;
			border-radius: 50%;
			position: absolute;
			top: 0
		}
	}
	.commentReply {
		float: right;
		margin-right: 20/@current;
		margin-left:20/@current;
		width: 500/@current;
		position: relative;
		img {
			width: 500/@current;
		}
		.chitchat {
			position: absolute;
			left: 22/@current;
			width: 100%;
			p {
				font-size: 28/@current;
			}
			p:first-of-type {
				position: absolute;
				color: #313131;
			}
			p:nth-of-type(2) {
				font-size: 24/@current;
				position: absolute;
				right: 32/@current;
				color: #A54BE8;
				padding:6/@current 10/@current;
				border:1/@current solid #A54BE8;
				border-radius: 6/@current;
				z-index:555;
			}
			.xianShi{
				color: #999!important;
				border:1/@current solid #999!important;
			}
			div{
				position:relative;
				margin-right:20/@current;
				border-bottom:1/@current solid #cfcdd3; 
				transform: translateY(-20/@current);
				  span{
				  	display:inline-block;
					color: #1B1B1B;
					font-size: 32/@current;
					margin-right:32/@current;
					width:100%;
				  }
			}
		}
	}


	
</style>